<template>

    <el-scrollbar class="login-box">

        <div class="login-box-title">
            <p>找回密码</p>
            <div class="login-box-border"></div>
            <div class="login-box-img">
                <img :src="IMG" alt="">
            </div>

        </div>

        <!-- 登录板块 -->
        <div class="login-box-div">

            <div class="box-login-text">找回密码</div>

            <el-form :model="form" class="box-input">
                <el-form-item label="账号">
                    <el-input v-model="form.name"
                        placeholder="请输入手机号" />
                </el-form-item>

                <el-form-item label="新密码">
                    <el-input v-model="form.name"
                        placeholder="请输入密码" />
                </el-form-item>

                <el-form-item label="确认密码">
                    <el-input v-model="form.name"
                        placeholder="请再次确认密码" />
                </el-form-item>
                <el-form-item label="验证码">
                    <el-input v-model="form.name"
                        placeholder="请输入验证码" />
                </el-form-item>

            </el-form>


            <el-form-item>
                <el-button type="primary"
                    @click="onSubmit">注册</el-button>
            </el-form-item>

            <div class="box-link">
                <router-link to="'/login'" class="box-router-link" >去登录</router-link>
            </div>


            <!-- 分割线 -->
            <div class="box-line"></div>


            <!-- 单位注册申请表 -->
            <div class="box-unit-table">


                <div class="box-inquire">
                    <div>
                        <LoginTable />
                    </div>

                    <div class="box-text">
                        <el-popover placement="bottom-start"
                            :width="200" trigger="click">
                            <template #reference>
                                <div style="margin-right: 16px"
                                    class="box-text-a">
                                    申请进度查询
                                </div>
                            </template>

                            <div @click="ProgressLogin = true"
                                class="box-text-b">
                                单位注册审核进度查询
                            </div>

                            <div @click="ProgressPassword = true"
                                style="cursor: pointer;"
                                class="box-text-b">
                                单位找回密码申请进度查询
                            </div>

                        </el-popover>

                        <el-dialog v-model="ProgressLogin">
                            <ProgressQueryLogin />
                        </el-dialog>

                        <el-dialog
                            v-model="ProgressPassword">
                            <ProgressQueryPassword />
                        </el-dialog>

                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>


<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

import IMG from '@/assets/img/login/logo_title.a80fbaa1.png'

const ProgressLogin = ref(false)
const ProgressPassword = ref(false)
const router = useRouter()
const route = useRoute()

const form = reactive({ name: '', })

const onSubmit = () => {
    console.log('submit!')
};



onMounted(() => {
   
    
})

</script>


<style lang='scss' scoped>
.login-box {
    height: 100%;
    background: url(@/assets/img/login/login_bg.png)no-repeat center center;
    background-size: cover;

    .login-box-title {
        width: 480px;
        height: 200px;
        position: absolute;
        top: 22%;
        left: 13%;

        p {
            font-size: 25px;
            font-weight: 900;
            color: #fff;
        }

        .login-box-border {
            width: 250px;
            height: 1px;
            margin: 30px 0;
            background: rgb(224, 224, 224);
        }

        .login-box-img {
            width: 500px;
            height: 60px;
            line-height: 80px;

            img {
                width: 100%;
            }
        }
    }

    ::after {
        width: 0px;
    }

    .login-box-div {
        position: absolute;
        width: 470px;
        border-radius: 8px;
        padding: 40px 0;
        background: #fff;
        left: 65%;
        top: 22%;

        .box-login-text {
            font-size: 20px;
            color: black;
            text-align: center;
            margin: 20px 0;
        }


        // input框样式
        .box-input {
            margin: 0 auto;
            width: 345px;

            ::v-deep .el-form-item {
                width: 100%;

                .el-form-item__label {
                    font-size: 12px;
                }
            }

            .el-input {
                width: 260px;

                ::v-deep .el-input__wrapper {
                    height: 28px;
                    font-size: 12px;
                    background-color: rgb(245, 248, 250);
                }
            }

            ::v-deep .el-form-item__content {
                margin: 0px !important;
                justify-content: flex-end;

                .el-select {
                    width: 260px;
                }
            }

        }

        // 确认按钮
        .el-button {
            background-color: rgb(81, 113, 255);
            width: 345px;
            height: 35px;
            line-height: 40px;
            font-size: 14px;
            margin: 0 auto;
            border: none;
        }

        // 去登录
        .box-link {
            width: 345px;
            margin: 0 auto;
            text-align: center;

            .box-router-link {
                color: rgb(82, 82, 82);
                font-size: 14px;
            }
        }

        ::v-deep .el-form-item__content {
            margin: 0px !important;
        }

        // 分割线
        .box-line {
            width: 345px;
            height: 2px;
            background: rgb(212, 212, 212);
            margin: 0 auto;
            margin-top: 18px;
            border-radius: 10px;
        }

        // 单位注册申请表
        .box-unit-table {
            width: 345px;
            margin: 0 auto;

            // 申请进度查询
            .box-inquire {
                width: 343px;
                display: flex;
                justify-content: space-around;
                margin: 15px 0;

                .box-text {
                    .box-text-a {
                        font-size: 14px;
                        color: rgb(50, 87, 252);

                        // 改变鼠标样式
                        cursor: pointer;
                    }

                }

            }
        }

    }
}

.box-text-b {
    cursor: pointer;
    color: black;
}

::v-deep .el-dialog {
    width: 430px;

    // height: 320px;
    .el-dialog__body {
        padding: 0;
    }
}
</style>